<template>
    <full-screen-dialog title="附件预览" v-model="excelShow" :width="1200" destroy-on-close @closed="$emit('closed')">
        <div>
            <iframe :src="officeUrl" width="100%" height="600px" frameborder="0"></iframe>
        </div>
    </full-screen-dialog>
    <el-dialog  v-model="imgShow" title="附件预览">
    	<img :src="previewImageUrl" style="max-width: 100%;" />
	</el-dialog>
	<el-dialog v-model="pdfShow" title="附件预览">
    	<iframe :src="previewImageUrl" width="100%" height="600px" frameborder="0"></iframe>
	</el-dialog>
</template>

<script>
	export default{
        props:{
            docUrl:{
                type:String,
                required:true
            }
        },
        data() {
			return {
				visible: false,
                excelShow:false,
                pdfShow:false,
                imgShow:false,
                previewImageUrl:''
			}
		},
        computed:{
            officeUrl(){
                return `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(this.docUrl)}`
            }
        },
        methods: {
			//显示=
			open() {
				this.visible = true;
				return this;
			},
            //表单注入数据
			async setData(dataarr) {
				console.log(dataarr)
                this.previewImageUrl = dataarr
				const filename = dataarr.split('/').pop(); // 获取文件名部分
				const parts = filename.split('.');
				const extension = parts[parts.length - 1].toLowerCase(); // 获取文件后缀并转换为小写

				switch (extension) {
					case 'xlsx':
					case 'xls':
						this.excelShow = true;
						break;
					case 'pdf':
						this.pdfShow = true
						break;
					case 'jpg':
					case 'jpeg':
					case 'png':
					case 'gif':
						this.imgShow = true;
						break;
					default:
						return 'Unknown file type';
						break;
				}
			},
		}
       
    }
</script>

<style scoped>
	
</style>
